<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>营地活动</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/js/vue.js"></script>
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>

    <style>
        .header {
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
        .fenye {
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
        .camp_img{
            width: 200px;
            margin-right: 20px;
        }
        /*.search {*/
        /*    width: 200px;*/
        /*}*/
    </style>
</head>
<body>
    <div id="div">
        <div class="header">
            <el-button type="success" @click="addDialogVisible = true">新增活动信息</el-button>

            <el-select v-model="pageExample.campId" placeholder="请选择营地">
                <el-option value="">请选择营地</el-option>
                <el-option
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select>

            <el-select v-model="pageExample.typeId" placeholder="请选择活动类型">
                <el-option value="">请选择活动类型</el-option>
                <el-option
                        v-for="type in types"
                        :key="type.id"
                        :label="type.typeName"
                        :value="type.id">
                </el-option>
            </el-select>

            <el-select v-model="pageExample.status" placeholder="请选择活动状态">
                <el-option value="">请选择活动状态</el-option>
                <el-option
                        key="0"
                        label="未开始"
                        value="0">
                </el-option>
                <el-option
                        key="1"
                        label="已结束"
                        value="1">
                </el-option>
            </el-select>

            <el-button type="primary" @click="selectAllActive">查询</el-button>
        </div>

        <!--新增act模态框-->
        <el-dialog
                title="新增活动信息"
                :visible.sync="addDialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>活动名字：</span><br>
            <el-input v-model="insertActInfo.actName" placeholder="请输入活动名"></el-input>
            <span>营地:</span><br>
            <el-select v-model="insertActInfo.campId" placeholder="请选择">
                <el-option
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select><br>
            <span>类型:</span><br>
            <el-select v-model="insertActInfo.typeId" placeholder="请选择">
                <el-option
                        v-for="type in types"
                        :key="type.id"
                        :label="type.typeName"
                        :value="type.id">
                </el-option>
            </el-select><br>
            <span>截止时间：</span><br>
                <el-date-picker
                        v-model="insertActInfo.time"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        value-format="yyyy-MM-dd HH:mm"
                        :picker-options="pickerOptions"
                        placeholder="选择日期时间">
                </el-date-picker><br>
            <span>单价/人：</span><br>
            <el-input v-model="insertActInfo.price" placeholder="请输入"></el-input>
            <span>最大数量：</span><br>
            <el-input type="number" v-model="insertActInfo.number" placeholder="请输入"></el-input>
            <span>活动介绍：</span><br>
            <el-input v-model="insertActInfo.introduce" placeholder="请输入"></el-input>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadImgs"
                    :on-remove="handleRemove"
                    :file-list="insertActInfo.fileList"
                    :on-success="successUpload"
                    :before-upload="setUploadBytes"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertAct()">确 定</el-button>
            </span>
        </el-dialog>

        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <img class="camp_img" :src="props.row.imgs[0].url" />
                            <el-form-item label="活动介绍">
                                <span>{{ props.row.introduce }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="活动编号" prop="actId">
                </el-table-column>
                <el-table-column label="活动名称" prop="actName">
                </el-table-column>
                <el-table-column label="活动类型">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{getTypeName(scope.row.typeId)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="报名价格/人" prop="price">
                </el-table-column>
                <el-table-column label="截止时间" prop="time">
                </el-table-column>
                <el-table-column label="剩余名额" prop="number">
                </el-table-column>
                <el-table-column label="活动状态" >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px" v-if="scope.row.status==0">未开始</span>
                        <span style="margin-left: 10px" v-if="scope.row.status==1">已结束</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="220">
                    <template scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                        <el-button type="info" size="mini" @click="toOrderIndex(scope.row.actId)">=></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>



<!--        删除模态框-->
        <el-dialog
                title="删除活动"
                :visible.sync="deleteDialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>活动名:</span><el-input v-model="deleteActInfo.actName" placeholder="请输入内容"></el-input>
            <span>活动状态:</span><el-input placeholder="请输入内容">{{deleteActInfo.status == 0 ? "未开始" : "已结束"}}</el-input><br>
            <span>报名价格:</span><el-input  v-model="deleteActInfo.price" placeholder="请输入内容"></el-input><br>
            <span>截止时间:</span><el-input  v-model="deleteActInfo.time" placeholder="请输入内容"></el-input>
            <span>剩余名额:</span><el-input  v-model="deleteActInfo.number" placeholder="请输入内容"></el-input>
            <span>营地介绍:</span><el-input  type="textarea"  autosize  v-model="deleteActInfo.introduce" placeholder="请输入内容"></el-input>
            <span>图片:</span><br><img v-for="img in deleteActInfo.imgs" :src="img.url">
            <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteCamp()">确认删除</el-button>
            </span>
        </el-dialog>

        <!--更新模态框-->
        <el-dialog
                title="更新营地信息"
                :visible.sync="updateDialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>活动名:</span><br><el-input v-model="updateActInfo.actName" placeholder="请输入内容"></el-input><br>
            <span>截止时间：</span><br>
            <el-date-picker
                    v-model="updateActInfo.time"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm"
                    value-format="yyyy-MM-dd HH:mm"
                    :picker-options="pickerOptions"
                    placeholder="选择日期时间">
            </el-date-picker><br>
            <span>营地:</span><br>
            <el-select v-model="updateActInfo.campId" placeholder="请选择">
                <el-option
                        v-for="camp in camps"
                        :key="camp.campId"
                        :label="camp.campname"
                        :value="camp.campId">
                </el-option>
            </el-select><br>
            <span>类型:</span><br>
            <el-select v-model="updateActInfo.typeId" placeholder="请选择">
                <el-option
                        v-for="type in types"
                        :key="type.id"
                        :label="type.typeName"
                        :value="type.id">
                </el-option>
            </el-select><br>

            <span>状态:</span><br>

            <el-select v-model="updateActInfo.status" placeholder="请选择">
                <el-option
                        :key="updateActInfo.status"
                        label="未开始"
                        value="0">
                </el-option>
                <el-option
                        :key="updateActInfo.status"
                        label="已结束"
                        value="1">
                </el-option>
            </el-select><br>

            <span>剩余名额:</span> <el-input  v-model="updateActInfo.number" placeholder="请输入内容"></el-input>
            <span>报名价格:</span><el-input  v-model="updateActInfo.price" placeholder="请输入内容"></el-input><br>
            <span>活动介绍介绍:</span><el-input  type="textarea"  autosize v-model="updateActInfo.introduce" placeholder="请输入内容"></el-input>
            <span>图片:</span><br>

            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-remove="deleteImgs"
                    :file-list="updateActInfo.imgs"
                    list-type="picture">
            </el-upload>
            <br><br>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadImgs"
                    :on-remove="handleRemove1"
                    :file-list="fileList1"
                    :on-success="successUpload1"
                    list-type="picture">
                <el-button size="small" type="primary">增加图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>

            <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateActive()">确 定</el-button>
            </span>
        </el-dialog>

        <div class="fenye">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageIndex"
                    :page-sizes="[2, 4, 6, 8]"
                    :page-size="page.number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.count">
            </el-pagination>
        </div>

    </div>

    <script>
        new Vue({
            el:"#div",

            data:{
                pickerOptions:{
                    disabledDate(time){
                        console.log(time.getTime())
                        return time.getTime() < Date.now()-3600 * 1000 * 24;
                    }
                },

                updateDialogVisible:false,
                deleteDialogVisible:false,
                addDialogVisible:false,
                types:{},
                camps:{},
                tableData:[],

                deleteActInfo:{},
                updateActInfo:{},
                fileList1:[],
                pageExample:{
                    campId:'',
                    typeId:'',
                    status:''
                },

                page:{
                    pageIndex:1,
                    number:2,
                    pageCount:null,
                    count:null
                },

                insertActInfo:{
                    actName:'',
                    campId:'',
                    price:'',
                    introduce:'',
                    time:'',
                    typeId:'',
                    number:'',
                    fileList:[]
                }
            },
            created(){
                this.selectAllActive();
                this.selectCamp();
            },
            methods:{
                selectAllActive(){
                    this.pageExample.pageIndex = this.page.pageIndex,
                    this.pageExample.number = this.page.number,
                    console.log(this.pageExample);
                    var _this = this;
                    $.ajax({
                        url: "/active/selectAllActive",
                        type: "get",
                        data:_this.pageExample,
                        dataType: "json",
                        success: function (data) {
                            _this.tableData = data.list;
                            _this.page = data.obj;
                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    })
                },
                selectCamp() {
                    var _this = this;
                    $.ajax({
                        url: "/active/selectAllCampAndTypes",
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            _this.camps = data.list[0];
                            _this.types = data.list[1];
                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //模态框确认
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {
                        });
                },
                handleSizeChange(val){
                    this.page.number = val;
                    this.selectAllActive();
                },
                handleCurrentChange(val){
                    this.page.pageIndex = val;
                    this.selectAllActive();
                },
                getTypeName(obj){
                    var typeName ='';
                    for(var i = 0;i < this.types.length;i++){
                        if (this.types[i].id == obj){
                            typeName = this.types[i].typeName;
                            break;
                        }
                    }
                    return typeName;
                },
                insertAct(){
                    var _this = this;
                    var url =[];
                    for (var i = 0; i < this.insertActInfo.fileList.length; i++) {
                        url.push(this.insertActInfo.fileList[i].response)
                    }
                    this.insertActInfo.url = url;
                    this.addDialogVisible = false;
                    $.ajax({
                        url: "/active/insertActive",
                        type: "post",
                        data:_this.insertActInfo,
                        dataType: "json",
                        traditional: true,
                        success: function (data) {
                            alert('success');
                            _this.insertActInfo={
                                actName:'',
                                    campId:'',
                                    price:'',
                                    introduce:'',
                                    time:'',
                                    typeId:'',
                                    number:'',
                                    fileList:[]
                            };

                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    })
                },
                handleRemove(file,fileList){
                    this.insertActInfo.fileList=fileList;
                },
                handleRemove1(file,fileList){
                    this.fileList1=fileList;
                },
                successUpload(response,file,fileList){
                    this.insertActInfo.fileList=fileList;
                },
                successUpload1(response,file,fileList){
                    this.fileList1=fileList;
                },
                setUploadBytes(){

                },
                handleDelete:function(index, row) {
                    this.deleteDialogVisible=true;
                    this.deleteActInfo = row;
                },
                handleEdit:function(index, row) {
                    this.updateDialogVisible=true;
                    this.updateActInfo = row;
                    this.updateActInfo.status += "";
                },
                deleteCamp(){
                    var _this = this;
                    this.deleteDialogVisible = false;
                    $.ajax({
                        url: "/active/deleteActive/" + _this.deleteActInfo.actId,
                        type: "delete",
                        dataType: "json",
                        success: function (data) {
                            alert('success');
                            _this.deleteActInfo={

                            };

                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    })
                },
                deleteImgs(file,fileList){
                    this.updateActInfo.deleteImgId=[];
                    this.updateActInfo.deleteImgId.push(file.id);
                },
                updateActive(){
                    var _this = this;
                    var url =[];
                    for (var i = 0; i < this.fileList1.length; i++) {
                        url.push(this.fileList1[i].response)
                    }
                    this.updateActInfo.url = url;
                    this.updateDialogVisible = false;
                    $.ajax({
                        url: "/active/updateActive",
                        type: "post",
                        data:_this.updateActInfo,
                        dataType: "json",
                        traditional: true,
                        success: function (data) {
                            alert('success');
                            _this.fileList1 = [];
                            _this.updateActInfo={};
                        },
                        error: function (data) {
                            alert(data.responseJSON.message);
                        }
                    })
                },
                toOrderIndex(actId){
                    location.href = "/page/active/activeOrder.html?"+actId;
                }
            }
        });

    </script>
</body>
</html>